<template>
<!-- 文章的每一项 -->
   <div>
      <!-- 跳转路径可以这么写： -->
      <!-- :to="'/article/' + article.art_id" -->
      <!-- :to="`/article/${article.art_id}`" -->
      <!-- cell 中的 to 属性 跟 routerlink 导航中的 to 属性一样 -->
      <van-cell
         class="article_item"
         :to="{
            // 根据路由名称进行跳转
            name:'article',
            // 传递路由动态参数
            params:{
               // 属性名：路由路径设计的动态参数名称 （名字可以随意保持一致）
               articleId: article.art_id
            }
         }"
      >
         <div
            slot="title"
            class="title van-multi-ellipsis--l2"
         >
            {{ article.title }}
         </div>
         <div slot="label">
            <div
               class="cover_wrap"
               v-if="article.cover.type === 3"
            >
               <div
                  class="cover_item"
                  v-for="(img, index) in article.cover
                     .images"
                  :key="index"
               >
                  <van-image
                     :src="img"
                     fit="cover"
                     class="cover_item_img"
                  />
               </div>
            </div>
            <!-- 文字提示 -->
            <div class="label_info_wrap">
               <span>{{ article.aut_name }}</span>
               <span>{{ article.comm_count }}评论</span>
               <span>{{
                  article.pubdate | relativeTime
               }}</span>
            </div>
         </div>
         <!-- 右边插槽 -->
         <!-- fit="cover"  短边显示出来 -->
         <van-image
            class="right_cover"
            v-if="article.cover.type === 1"
            slot="default"
            :src="article.cover.images[0]"
            fit="cover"
         />
      </van-cell>
   </div>
</template>

<script>
export default {
   name: 'ArticleItem',
   props: {
      article: {
         type: Object,
         required: true
      }
   }
}
</script>

<style lang="less" scoped>
.article_item {
   .title {
      font-size: 32px;
      color: #3a3a3a;
   }
   .van-cell__value {
      flex: unset;
      width: 232px;
      height: 146px;
      padding-left: 25px;
   }
   .right_cover {
      width: 232px;
      height: 146px;
   }
   .label_info_wrap span {
      font-size: 22px;
      color: #b4b4b4;
      margin-right: 25px;
   }
   .cover_wrap {
      padding: 30px 0;
      display: flex;
      .cover_item {
         flex: 1;
         height: 146px;
         // 不包含最后一个元素
         // & 表示cover_item 这个自己
         &:not(:last-child) {
            padding-right: 4px;
         }
         .cover_item_img {
            width: 100%;
            height: 146px;
         }
      }
   }
}
</style>
